import { ComponentProps, Mut, VueComponent } from "vue3-oop"
import { Tabs,TabPane,Collapse, CollapsePanel,Form,FormItem,InputNumber,RadioGroup,RadioButton,Button } from 'ant-design-vue';
import { FormData } from '../types'
import moduleCss from './styles/index.module.scss'
import scrollBarCss from '@/styles/scrollbar.module.scss'
import CfgWidget from '../widgets/cfg-widget'
import { GRID } from "../widgets/attr-widget";

interface IProps {
  formData: FormData
}
export default class FdnConfig extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {}
  }

  constructor(
  ) {
    super();
  }

  @Mut() activeTab = 'FormAttr';

  @Mut() activeCollapse = ['BASIC','LAYOUT'];

  @Mut() layoutWinSize = this.props.formData.winSize

  // @Hook('BeforeUpdate')
  // onBeforeUpdate(){
  //   const { formData } = this.props;
  //   if(this.layoutWinSize!==formData.winSize){
  //     this.layoutWinSize=formData.winSize
  //   }
  // }

  render() {
    // console.log("FdnConfig render")
    const { formData } = this.props;
    const rootWidget = formData.nodeTree.widgetItem;
    const attrGrid = rootWidget.GRID as GRID;

    let showWidgetAttr = false;
    if(formData.selectedWidgetItem){
      showWidgetAttr = true;
      this.activeTab = 'WidgetAttr';
    }else{
      this.activeTab = 'FormAttr';
    }

    
    // console.log(this.layoutWinSize,formData.winSize)

    return (
      <Form
        class={[moduleCss['fdn-config']]}
        size="small"
        labelCol={{
          style:{
            width:'80px'
          }
        }}
        labelAlign='left'
      >
        <Tabs
          size="small"
          type="line"
          animated
          activeKey={this.activeTab}
          onChange={(value)=>{this.activeTab=value as string}}
          class={[
            scrollBarCss['scrollbar-y']
          ]}
        >
          {formData.selectedWidgetItem&&showWidgetAttr && (
            <TabPane key='WidgetAttr' tab='组件属性'>
              <CfgWidget 
                formData={formData}
                widgetItem= {formData.selectedWidgetItem}
              />
            </TabPane>
          )}
          <TabPane key='FormAttr' tab='表单属性'>
            <Collapse
              activeKey={this.activeCollapse}
              onChange={(newActiveKey)=>{this.activeCollapse = newActiveKey as string[]}}
            >
              <CollapsePanel header='基本属性' key='BASIC' >
                <FormItem label="标签宽度">
                  <InputNumber style={{width:'100%'}}
                    size='small' 
                    value={formData.labelWidth} 
                    min={50} 
                    onChange={(value)=>{formData.labelWidth=Number(value)}} 
                    addon-after="px"
                  />
                </FormItem>
                <FormItem label="标签对齐">
                  <RadioGroup 
                    size='small' 
                    value={formData.labelAlign}
                    onChange={(event)=>{formData.labelAlign=event.target.value}}
                  >
                    <RadioButton value='left' >左</RadioButton>
                    <RadioButton value='right' >右</RadioButton>
                  </RadioGroup>
                </FormItem>
              </CollapsePanel>
              <CollapsePanel header='布局属性' key='LAYOUT' >
                <FormItem label="默认宽度" hasFeedback={false}>
                  <InputNumber style={{width:'100%'}}
                    size='small'
                    value={attrGrid.defaultSpan} 
                    min={1} max={24} 
                    onChange={(value)=>{attrGrid.defaultSpan=Number(value)}} 
                    addon-after="格"
                  />
                </FormItem>
                <Collapse
                  activeKey={['GUTTER']}
                >
                  <CollapsePanel header='组件间隔' key='GUTTER' >
                    <Tabs
                      size="small"
                      type="card"
                      class={[moduleCss['gutter-tabs']]}
                      activeKey={this.layoutWinSize}
                      onChange={(value)=>{this.layoutWinSize = value as any}}
                    >
                    {{
                      leftExtra: ()=>(<Button size="small" onClick={()=>{this.layoutWinSize=formData.winSize}} style={{marginRight:'10px'}}>当前</Button>),
                      default: ()=>Object.keys(attrGrid.gutter[0]).map((winSize)=>{
                        return (<TabPane key={winSize} tab={winSize.toUpperCase()}>
                          <FormItem label="水平间隔">
                            <InputNumber style={{width:'100%'}}
                              size='small' min={0} addon-after="px"
                              value={(attrGrid.gutter[0] as any)[winSize]} 
                              onChange={(value)=>{(attrGrid.gutter[0] as any)[winSize]=Number(value)}}
                            />
                          </FormItem>
                          <FormItem label="垂直间隔">
                            <InputNumber style={{width:'100%'}}
                              size='small' min={0} addon-after="px"
                              value={(attrGrid.gutter[1] as any)[winSize]} 
                              onChange={(value)=>{(attrGrid.gutter[1] as any)[winSize]=Number(value)}}
                            />
                          </FormItem>
                        </TabPane>)
                      })
                    }}
                    </Tabs>                    
                  </CollapsePanel>
                </Collapse>
              </CollapsePanel>
            </Collapse>
            
          </TabPane>
        </Tabs>
      </Form>
    )
  }
}